<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="referer" content="no-referer">
    <title>电视直播</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!--  Axios 请求库  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="/static/cms/js/axios.js"></script>

    <!--  视频工具类  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.18.0/video.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.18.0/alt/video-js-cdn.min.css" rel="stylesheet">
    <style>
        .row {
            margin-top: 120px;
        }

        #tv-list {
            height: 460px;
            overflow: auto;
        }

        #tv-list li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="card" style="width: 62%;">
                <div class="card-header" id="tv-name"> PlayName </div>
                <div class="card-body">
                    <video id="livePay" class="video-js" crossorigin="anonymous" style="width: 100%"></video>
                </div>
            </div>
            <div class="card" style="width: 18rem; margin-left: 10px">
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input id="search" type="text" class="form-control" placeholder="频道名称" aria-label="频道名称" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">
                            <i class="bi bi-search"></i>
                        </span>
                    </div>
                    <ul class="list-group list-group-flush" id="tv-list"></ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const tvList = $('#tv-list')
    window.HELP_IMPROVE_VIDEOJS = false
    videojs.options.autoplay = true
    const Player = videojs('livePay', {
        muted: true,
        controls: true,
        loop: false,
        autoplay: false,
        crossorigin: 'anonymous',
        sources: [{
            src: '',
            type: "application/x-mpegURL"
        }],
        aspectRatio: "10:8",// 长宽比(优先级高于宽高属性)
        playbackRates: [ 0.5, 1, 1.5, 3 ], //可选播放速度
        // fluid:true,
    })

    $('#search').keydown((e) => {
        if (e.keyCode === 13) searchTvUrl(e.target.value)
    })

    function getM3u8File() {
        searchTvUrl('');
    }

    function searchTvUrl(name) {
        send({ tv_name: name }).then(res => {
            templateRender(res.data.items)
        })
    }

    function send(params) {
        return axios.request({
            url: '/get_play_live_tv_rtmp_url',
            params
        })
    }

    function templateRender(tv) {
        document.getElementById('tv-list').innerText = ''
        if (tv.length === 0) document.getElementById('tv-list').innerText = '<strong>暂无频道</strong>'
        tv?.map(e => {
            tvList.append(`
                <li class="list-group-item" class="tv-item" data-url="${e['url']}">
                    <img src="${e['options']['tvg-logo']}" style="width: 62px" data-url="${e['url']}" />
                    <span style="font-size: 12px" data-url="${e['url']}">${e['options']['tvg-id']}</span>
                </li>
            `)
        })

        tvList.on('click', 'li', e => {
            Player.src([{
                src: "/proxy_m3u8_server?url="+e.target.getAttribute('data-url'),
                type: "application/x-mpegURL"
            }])
        })
    }

    getM3u8File()
</script>
</html>

<!--


-->